<template>
  <el-dialog
    :before-close="onCancel"
    title="选择题目"
    :model-value="visible"
    :destroy-on-close="true"
    append-to-body
    width="1000px"
    top="10vh"
  >
    <div v-loading="loading" class="content">
      <div class="search_box">
        <el-select v-model="form.type" placeholder="请选择商品类型">
          <el-option
            v-for="(item, index) in questiontypeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-input v-model="form.title" placeholder="请输入题目名称" />
        <el-button type="primary" @click="onSearch()">查询</el-button>
      </div>
      <div class="table_box">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          class="el_table"
          height="450px"
          :data="tableData"
          empty-text="暂无数据"
          :show-header="true"
          :header-cell-style="{backgroundColor:'#EEF6FF',height:'48px'}"
          @selection-change="onPlChange"
          :row-key="(row)=>{
              return row.id
            }"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
            :selectable="(row)=>{
              return !disabledGoodsNoArr.list.includes(row.id)
            }"
          />
          <el-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width ? item.width:''"
            :formatter="item.formatter"
          />
        </el-table>
      </div>
      <el-pagination
        class="el_footer"
        :current-page="form.currPage"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="form.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div class="btn_box">
      <div>
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmit">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import businessApi from '@/api/business'
export default {
  name: 'selectGoods',
  emits: ['changee'],
  props: {
    visible: {
      default: false
    },
    disabledGoodsNoArr:{
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
      loading: false,
      form: {
        currPage:1,
        pageSize:10,
        status:0,
        title:'',
        type:'',
        total:0,
      },
      questiontypeList:[
            {
                id:'',
                name:'全部'
            },
            {
                id:0,
                name:'单选'
            },
            {
                id:1,
                name:'多选'
            },
            {
                id:2,
                name:'填空'
            },
        ],
      // 表格
      tableData: [],
      tableColumns: [
        {
            prop: 'question',
            label: '问题标题'
        },
        {
            prop: 'type',
            label: '问题类型',
            formatter: (cellValue) => {
                let arr2 = this.questiontypeList.filter(item=>item.id===cellValue.type)
                return arr2.length > 0 ? arr2[0].name : '未选类型' 
            }
        },
        {
            prop: 'remarks',
            label: '问题说明',
        },
        {
            prop: 'required',
            label: '是否必填',
            formatter: (cellValue) => {
                return cellValue.required == 0 ? '是':'否'
            }
        },
        {
            prop: 'createTime',
            label: '创建时间'
        },
      ],
      // 批量
      plArr: []
    }
  },
  computed: {

  },
  watch: {
    visible(newValue, oldValue) {
      if (newValue) {
        this.getData()
        // this.getBrandList().then(()=>{
        //   this.getData()
        // })
      } 
    //   else {
    //       console.log(Object.assign(this.$data, this.$options.data()))
    //     Object.assign(this.$data, this.$options.data())
    //   }
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    getData(){
            this.loading = true
            businessApi.findQuestionBankPage({
                current:this.form.currPage,
                pageSize:this.form.pageSize,
                title:this.form.title,
                type:this.form.type,
                status:this.form.status,
            }).then((res)=>{
                this.tableData = res.data.records
                this.form.total = res.data.total
                this.loading = false
            }).catch((err)=>{
                this.$message.error(err.message || err.data.massage ||'服务器错误')
                this.loading = false
            })
        },
    onCancel() {
      this.$emit('changee', {
        bool: false
      })
    },
    onSubmit() {
      if (this.plArr.length == 0) {
        this.$message({
          message: '请选择题目',
          type: 'warning'
        })
      } else {
        this.loading = true
        let timuArr = []
        for (let i = 0 ; i < this.plArr.length ;i++) {
            let tianjia = {
                quebankId: this.plArr[i].id,
                questionnaireId: this.disabledGoodsNoArr.id
            }
            timuArr.push(tianjia)
        }
        businessApi.addQuestions(timuArr).then((res)=>{
            this.$message({
                message: '添加成功',
                type: 'success'
            });
            this.loading = false
            this.plArr = []
            this.$emit('changee',{bool:false,refresh:true})
        }).catch((err)=>{
            this.loading = false
            this.$message.error(err.message)
        })
      }
    },
    // 获取下拉
    //  getBrandList() {
    //   return new Promise((resolve) => {
    //     if(this.goodsTypeOptions.length == 0){
    //       getBrandList().then((res) => {
    //         res.data = res.data || []
    //         this.goodsTypeOptions = [
    //           {
    //             oliveBrandId: '',
    //             oliveBrandName: '全部商品类型'
    //           },
    //           ...res.data
    //         ]
    //         this.form.type = 12 //默认生鲜
    //         resolve(true)
    //       }).catch(() => {
    //         this.form.type = ''
    //         resolve(true)
    //       })
    //     }else{
    //       resolve(true)
    //     }
    //   })
    // },
    // 表格
    handleSizeChange(val) { // 分页
      this.form.pageSize = val
      this.form.currPage = 1
      this.getData()
    },
    handleCurrentChange(val) {
      this.form.currPage = val
      this.getData()
    },
    // 搜索
    onSearch(){
      this.form.currPage = 1
      this.getData()
    },
    // 批量
    onPlChange(val) {
      this.plArr = val
    }
  }
}
</script>
<style lang="scss" scoped>
:v-deep.el-dialog__header {
    border-bottom: 1px solid #DBDDDF;
}
:v-deep.el-dialog{
  border-radius: 12px;
}
::v-deep.el-dialog__title{
  font-weight: bold;
}
.content{
//   display: flex;
//   margin-bottom: 26px;
//   max-height: 300px;
//   overflow-y: auto;
//   min-height: 50px;
    .search_box{
        display: flex;
        margin-bottom: 20px;
        .el-input{
            width: 200px;
            margin-left: 20px;
        }
        .el-button{
            margin-left: 20px;
        }
    }
    .el_footer{
        text-align: right;
        margin: 20px 0;
    }
}
.btn_box{
    text-align: center;
  &>div{
    .el-button{
      width: 80px;
      height: 36px;
    }
  }
}

</style>
